<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/style.css" media="all">
    <link rel="stylesheet" type="text/css" href="../../components/css/common.css" media="all">
    <style type="text/css">
        .space a {
            display: inline-block;
            padding: .5em 1em;
            border: 1px solid #000;
            background-color: #cad5eb;
        }

        .space {
            display: inline-table;/*for chrome：其实现在的chrome没有此问题了*/
            word-spacing: -6px;
        }

        .space a {
            word-spacing: 0;
        }
    </style>
</head>
<body>
<div class="wrap2 m10a tsG">
    <div class="p10">
        <h2 class="title">天生的inline-block元素</h2>
        <div class="space">
            <input type="text" />
            <input type="submit" />
        </div>
        <p class="blank10"></p>
        <h2 class="title">被变成的inline-block元素</h2>
        <span class="description">
            word-spacing好像是最简单的方法 <br>
            一个是字符间距(letter-spacing)一个是单词间距(word-spacing)，大同小异。 <br>
            据我测试，word-spacing的负值只要大到一定程度，其兼容性上的差异就可以被忽略。 <br>
            因为，貌似，word-spacing即使负值很大，也不会发生重叠。 <br>
            不过，经过测试：-6px是最合适的 <br>
            如果您使用Chrome浏览器，可能看到的是间距依旧存在。 <br>
            确实是有该问题，原因我是不清楚，不过我知道，可以添加display: table;或display:inline-table;让Chrome浏览器也变得乖巧。
        </span>
        <div class="space">
            <a href="##">惆怅</a>
            <a href="##">淡定</a>
            <a href="##">热血</a>
        </div>
    </div>
</div>
</body>
</html>